<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" style="padding-top: 0px">
          <a-col :md="6" :sm="8">
            <a-form-item label="销售订单号" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
              <a-input placeholder="销售订单号" v-model="queryParam.soNo"/>
            </a-form-item>
          </a-col>
          <a-col :md="18" :sm="16">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="showOrClose" icon="search" style="margin-left: 10px;">高级查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-row v-if="show" style="padding-top: 0px">
      <a-col :md="6" :sm="8">
        <a-form-item label="采购订单id/采购订单行项目id" :label-col="{ span:12 }" :wrapper-col="{ span: 12 }">
          <a-input placeholder="采购订单id/采购订单行项目id" v-model="queryParam.eipPoNo"></a-input>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="种类编码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
          <j-dict-select-tag style="width: 260px" v-model="queryParam.subclassCode" placeholder="请选择种类编码"
                             dictCode="subclassCode"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="合同编号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
          <a-input placeholder="合同编号" v-model="queryParam.conCode"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="采购方公司名称" :label-col="{ span: 8}" :wrapper-col="{ span: 14 }">
          <a-input placeholder="采购方公司名称" v-model="queryParam.buyerName"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="物资名称" :label-col="{ span: 4}" :wrapper-col="{ span: 16 }">
          <a-input placeholder="物资名称" v-model="queryParam.productName"></a-input>
        </a-form-item>
      </a-col>
    </a-row>

    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="puid"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      :pagination="ipagination"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      @change="handleTableChange">

      <img v-if="!record.remark1.indexOf('10001')" slot="pic" style="width: 20px;" slot-scope="text, record" src='../../../../assets/yellow.jpg' alt="">
      <img v-else slot="pic" style="width: 20px;" slot-scope="text, record" src='../../../../assets/green.jpg' alt="">

      <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">修改</a>
          <a-divider type="vertical"/>
          <a @click="toProductionOrder(record)">关联生产订单</a>
          <a-divider type="vertical"/>
          <a @click="toSalesOrderDetail(record)">详情</a>
        </span>
    </a-table>

    <eipSalesOrder-modal ref="modalForm" @ok="modalFormOk"/>
    <eipSalesOrder-detail v-if="showSalesOrderDetail" ref="EipSalesOrderDetail" :dataSourceDetail="dataSourceDetail" @close="closeDetail"/>
  </a-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import EipSalesOrderModal from './modules/EipSalesOrderModal'
  import EipSalesOrderDetail from './modules/EipSalesOrderDetail'
  import { getAction } from '@/api/manage'

  export default {
    name: 'EipSalesOrderList',
    mixins: [JeecgListMixin],
    components: {
      EipSalesOrderModal,
      EipSalesOrderDetail
    },
    data() {
      return {
        value: ['平高电器'],
        description: 'eip_sales_order管理页面',
        show: false,                    //高级查询
        showSalesOrderDetail: false,    //详情弹框
        supplierSoRelType: '',          //关联方式
        dataSource: [],                 //列表数据
        dataSourceDetail: {},           //详细数据
        // 列表数据表头
        columns: [
          {
            title: '状态',
            dataIndex: 'remark',
            // fixed: 'left',
            key: 'pic',
            scopedSlots: { customRender: 'pic' }
          },
          {
            title: '供应商名称',
            align: 'center',
            dataIndex: 'supplierName'
          },
          {
            title: '销售订单号',
            align: 'center',
            dataIndex: 'soNo'
          },
          {
            title: '行项目号',
            align: 'center',
            dataIndex: 'soItemNo'
          },

          {
            title: '采购方公司名称',
            align: 'center',
            dataIndex: 'buyerName'
          },
          {
            title: '合同编号',
            align: 'center',
            dataIndex: 'conCode'
          },
          {
            title: '物资名称',
            align: 'center',
            dataIndex: 'productName'
          },
          {
            title: '物资数量',
            align: 'center',
            dataIndex: 'productAmount'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: '/eipSalesOrder/list',
          selectByPuid: '/eipSalesOrder/selectByPuid',
          exportXlsUrl: '/eipSalesOrder/exportXls'
        }
        ,
        dictOptions: {}
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },

    methods: {
      //高级查询是否展开
      showOrClose() {
        this.show = !this.show
      },
      closeDetail() {
        this.showSalesOrderDetail = false
      },
      //跳转到生产订单
      toProductionOrder(record) {
        localStorage.setItem('soNo', record.soNo)
        this.$router.push({ path: '/eipProductionOrder/checkList' })
      },
      //生产订单详细信息
      toSalesOrderDetail(record) {
        this.showSalesOrderDetail = true
        this.dataSourceDetail = record
      },
      handleEdit: function(record) {
        // let params = { 'puid': record.puid }
        // getAction(this.url.selectByPuid, params).then((res) => {
        //   record = res.result
          this.$refs.modalForm.edit(record)
          this.$refs.modalForm.title = '编辑'
          this.$refs.modalForm.disableSubmit = false
        // })
      },
      //加载销售订单
      loadData(arg) {
        if (arg === 1) {
          this.ipagination.current = 1
        }
        let params = { 'pageNo': this.ipagination.current, 'pageSize': this.ipagination.pageSize }
        let puid = localStorage.getItem('puid')
        let soNo = localStorage.getItem('soNo')
        let eipPoNo = localStorage.getItem('eipPoNo')
        if (puid !== null) {
          this.queryParam.soNo = soNo
          params['puid'] = puid
          params['soNo'] = soNo
        } else if (eipPoNo != null) {
          let reg = new RegExp('"', 'g')
          let eipPoNoTemp = JSON.stringify(eipPoNo).replace('-', '|').replace(reg, '')
          eipPoNo = eipPoNoTemp === 'null' ? null : eipPoNoTemp
          params['eipPoNo'] = eipPoNo
        } else {
          params = this.getQueryParams()//查询条件
        }
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (eipPoNo != null) {
            if (res.result.records[0] !== undefined) {
              let supplierSoRelType = res.result.records[0].supplierSoRelType
              if (supplierSoRelType === '1') {
                this.queryParam.eipPoNo = eipPoNo.substring(0, 10)
              } else {
                this.queryParam.eipPoNo = eipPoNo
              }
            } else {
              this.queryParam.eipPoNo = eipPoNo
            }
          }
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
        localStorage.removeItem('puid')
        localStorage.removeItem('soNo')
        localStorage.removeItem('eipPoNo')
      }
    }
    , watch: {
      value(val) {
        console.log(`selected:`, val)
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
<!--<style>-->
<!--  @import '~@assets/less/common.less';-->

<!--  .red {-->
<!--    background-color: #e6fffb;-->
<!--  }-->
<!--</style>-->
